<template>
  <div>
    <!-- 搜索 -->
    <el-row align='top'>
      <el-col :span="18">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="目录名称" prop="directoryName">
            <el-input v-model.trim="form.directoryName" :disabled="isBan" ></el-input>
          </el-form-item>
          <el-form-item label="状态" label-width="80px">
            <el-select :collapse-tags="true" v-model="form.state" placeholder="请选择">
              <el-option label="启用" :value="1"></el-option>
              <el-option label="禁用" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="onClear">清除</el-button>
            <el-button type="primary" @click="onSubmit" size="small">搜索</el-button>
          </el-form-item>
      </el-form>
      </el-col>
      <el-col :span="6" >
        <el-button v-if="$route.query.id" type="text" size="small" @click="$router.go(-1)">
          <i class="el-icon-back"></i>
          返回学科
          </el-button>
          <el-button type="success" size="small" icon="el-icon-edit"   @click="editSubjectDialog=true">
              新增目录
          </el-button>
        </el-col>
    </el-row>
    <!-- 提示信息 -->
    <el-row>
        <el-alert
          :title="'数据一共'+total+'条'"
          type="info"
          show-icon
          >
        </el-alert>
      </el-row>
      <!-- 新增目录 -->
      <DirectoryAdd :editSubjectDialog.sync="editSubjectDialog" @getDirectory="$emit('getDirectory')"/>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/directorys.js'
import DirectoryAdd from '../components/directorys-add.vue'
export default {
  data () {
    return {
      form: {
        directoryName: '',
        state: ''
      },
      rules: {
        directoryName: [{ required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      editSubjectDialog: false
    }
  },
  components: {
    DirectoryAdd
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    directoryDetail: {
      type: Object,
      required: true
    },
    subjectName: {
      type: String,
      default: ''
    },
    pageData: {
      type: Object,
      required: true
    }
  },
  computed: {
    isBan () {
      if (this.$route.query.id && (this.total === 1 || this.total === 0)) {
        return true
      }
      return false
    }
  },
  created () {
    this.loadDirectoryList()
  },
  watch: {
    // 监听list第一条数据
    directoryDetail: {
      handler (newName, oldName) {
        this.form.directoryName = newName.directoryName
        this.form.state = newName.state
        // if(!newName.totals || newName.totals)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 搜索
    async onSubmit () {
      try {
        if (this.$route.query.id) {
          this.form.directoryName = this.subjectName
          const res = await list(this.form)
          this.$message.success('亲，搜索哟~')
          this.$emit('getDirectoryList', res.data.items)
          this.$emit('getTotal', res.data.counts)
        } else {
          const res = await list({ ...this.form, ...this.pageData })
          this.$message.success('亲，搜索哟~')
          this.$emit('getDirectoryList', res.data.items)
          this.$emit('getTotal', res.data.counts)
        }
        this.$emit('clickSearch', this.form)
        if (!this.total) {
          this.form.tagName = ''
          this.form.state = ''
        }
      } catch (err) {
      }
    },
    // 清空
    onClear () {
      this.form.directoryName = ''
      this.form.state = ''
      this.$emit('getDirectory')
    },
    // 加载列表
    loadDirectoryList () {
      if (this.directory && this.directory.id) {
        this.form.directoryName = this.directory.directoryName
        this.form.state = this.directory.state
      }
    }
  }
}
</script>

<style scoped lang='less'>
  .container {
    padding: 10px;
    .box-card {
      font-size: 14px;
    }
  }
  /deep/.box-card{
    width: 100% !important;
  }
    /deep/.right {
      color: #c0c4cc !important;
    }
    .text {
    font-size: 14px;
    }

    .item {
    margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 480px;
  }
  .el-col {
    height: 51px;
  }
    .el-col:nth-child(2) {
    text-align: right;
  }
  .el-row {
    display: block;
  }
  .el-alert {
    margin-bottom: 13px;
    margin-top: 3px;
  }
</style>
